<template>
    <div class="friend-centre">
        <van-cell-group>
            <van-cell title="新朋友" is-link
                @click="onClickBtn"
            >
                <template>
                    <van-badge dot v-if="unreadApplications"/>
                </template>
            </van-cell>

            <van-cell title="群通知" is-link @click="onClickGroupNotify">
                <template>
                    <van-badge dot v-if="unreadGroupNotifications"/>
                </template>
            </van-cell>
        </van-cell-group>
    </div>
</template>

<script>
    import { mapMutations, mapState } from "vuex";

    export default {
        computed: {
            ...mapState('newFriend', ['unreadApplications']),
            ...mapState(['unreadGroupNotifications'])
        },
        methods: {
            ...mapMutations('newFriend', ['upUnreadApplications']),
            ...mapMutations(['updateUnreadGroupNotifications']),
            onClickBtn() {
                this.$router.push('/newFriend');
                this.upUnreadApplications(false);
            },
            onClickGroupNotify() {
                this.$router.push('/groupNotification');
                this.updateUnreadGroupNotifications(false);
            },
        },
    };
</script>

<style lang="less" scoped>
    .friend-centre {
        .van-cell-group {
            margin: 10px 0;
        }
    }
</style>
